<template>
  <div>
    <a-form :form="form" class="ant-advanced-search-form">
      <a-row :gutter="24">
        <a-col
          v-for="(item, index) in formItem"
          :label="item.label"
          :key="item.model"
          :span="item.span || 16"
          :style="item.style || { margin: '0 auto' }"
        >
          <!-- <a-form-item
            v-for="(item, index) in formItem"
            :label="item.label"
            :key="item.model"
          > -->
          <div v-if="item.type == 'line'" style="border-top: 1px solid rgb(233 228 228);margin: 10px 0;"/>
          <a-form-item
            v-else
            :label="item.label"
            :labelCol="item.labelCol || {}"
            ref="formSlot"
          >
            <slot
              :name="item.slot"
              :row="item"
              :model="item.model"
              :form="form"
              :is="false"
              :flag="showNameIs"
              :index="index"
              :click="showOnSlot.click"
            >
              <a-input
                v-if="item.type === 'input'"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :placeholder="'请输入' + item.label"
                :disabled="item.disabled || false"
              />
              <a-input
                v-if="item.type === 'number'"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :placeholder="'请输入' + item.label"
                :disabled="item.disabled || false"
                type="number"
              />
              <a-select
                v-if="item.type === 'select'"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :placeholder="'请选择' + item.label"
                :disabled="item.disabled || false"
              >
                <a-select-option
                  v-for="sop in item.option || []"
                  :key="sop.value"
                  :value="sop.value"
                  :disabled="item.disabled || false"
                >
                  {{ sop.name }}
                </a-select-option>
              </a-select>

              <a-date-picker
                v-if="item.type === 'datetime'"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :disabled="item.disabled || false"
                :placeholder="'请选择' + item.label"
                :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
                @change="
                  handlerPicker(
                    $event,
                    item.format || 'YYYY-MM-DD HH:mm:ss',
                    item.model
                  )
                "
                :defaultValue="undefined"
                :defaultPickerValue="undefined"
                :autoFocus="true"
                @focus="
                  panelChange(
                    $event,
                    item.format || 'YYYY-MM-DD HH:mm:ss',
                    item.model
                  )
                "
              />
              <a-textarea
                v-if="item.type === 'textarea' && !item.toHeight"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :disabled="item.disabled || false"
                :placeholder="'请输入' + item.label"
                :auto-size="item.option ? item.opinion : {}"
                class="resize"
              />

              <a-textarea
                v-if="item.type === 'textarea' && item.toHeight"
                :style="item.style || {}"
                class="resize"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :disabled="item.disabled || false"
                :placeholder="'请输入' + item.label"
                :auto-size="item.option ? item.opinion : {}"
              />

              <a-radio-group
                :name="item.label || index"
                v-if="item.type === 'radio'"
                :options="item.option || []"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :disabled="item.disabled || false"
              >
              </a-radio-group>
              <compSelector
              v-if="item.type === 'comp-selector-type'"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :compType="item.compType"
              :defaultValue="form.getFieldValue(`${item.model}`)"
              :dictionaryType="item.dictType"
              :separateAreas="item.dictType"
              @selectHandleChange="selectHandleChange($event,item.model)"
              />
              <!-- 数字字典 -->
              <ych-dict-select-tag
                v-if="item.type === 'ych-dict-select-tag'"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :type="'radio'"
                :dictCode="item.dictType"
                :disabled="item.disabled || false"
                @change="handlerDictSelect($event, item.model)"
                @input="handlerDictSelect($event, item.model)"
              />

              <ych-multi-select-tag
                v-if="item.type === 'ych-multi-select-tag'"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :type="'checkbox'"
                :dictCode="item.dictType"
                :disabled="item.disabled || false"
              />

              <ych-multi-select-tag
                v-if="item.type === 'ych-select-tag'"
                v-decorator="[
                  `${item.model}`,
                  { rules: item.rules ? item.rules : [] },
                ]"
                :mode="item.mode || ''"
                :type="'select'"
                :dictCode="item.dictType"
                :disabled="item.disabled || false"
              />

              <!-- <a-checkbox-group
              :name="item.label || index"
              v-if="item.type === 'checkbox'"
              :options="item.option || []"
              v-decorator="[
                `${item.model}`,
                { rules: item.rules ? item.rules : [] },
              ]"
              :disabled="item.disabled || false"
            >
            </a-checkbox-group> -->
              <slot name=""></slot>
            </slot>
          </a-form-item>
          
        </a-col>
      </a-row>
      <slot name="save"></slot>
    </a-form>
  </div>
</template>

<script>
import moment from "moment";
import checkboxGroup from "@/views/everydayCheck/components/checkbox-group";
import YchDictSelectTag from "@/components/dict/YchDictSelectTag";
import YchMultiSelectTag from "@/components/dict/YchMultiSelectTag";
import compSelector from '@/components/compSelector/compSelector'
export default {
  name: "everday-form",
  components: {
    YchMultiSelectTag,
    YchDictSelectTag,
    compSelector,
  },
  props: {
    formLayout: {
      type: String,
      default() {
        return "horizontal";
      },
    },
    beforeCreate: {
      type: Function,
    },
    formItem: {
      type: Array,
      default: [],
    },
    labelcol: {
      type: Object,
      default() {
        return { span: 5 };
      },
    },
    wrappercol: {
      type: Object,
      default() {
        return { span: 12 };
      },
    },
    type: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "id",
    },
  },

  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      slotForm: {},
      showNameIs: false,
      showOnSlot: {
        flag: [],
        click: (index, slot) => {
          let flag = false;
          return !flag;
        },
      },
      datapickerDefault: undefined,
      compSelectorKey:null,
    };
  },
  created() {
    //console.log(this.form)
    if (this.beforeCreate) {
      this.beforeCreate(this.form, this.type, this.id);
    }
  },
  mounted() {
    if (this.beforeCreate) {
      this.beforeCreate(this.form, this.type, this.id);
    }
  },
  methods: {
    moment,
    handlerPicker(date, format, prototype) {
      let obj = {};
      obj[prototype] = date ? moment(date).format(format) : "";
      this.form.setFieldsValue(obj);
      //console.log(this.form.getFieldValue(`${prototype}`));
    },
    panelChange(event, format, model) {
      let valeu = this.form.getFieldValue(`${model}`) || "";
      if (valeu.indexOf("Invalid date") !== -1) {
        this.form.resetFields([`${model}`]);
      }
    },
    selectHandleChange(val,model){
      let data = {}
      data[model] = val
      this.form.setFieldsValue(data);
    },
  },

  watch: {
    formItem: {
      immediate: true,
      deep: true,
      handler() {
        this.formItem.filter((f) => {
          if (f.model) {
            f.model.trim();
          }
          if (f.axios) {
            f.axios();
          }
          
          return f;
        });
      },
    },
  },
  filters: {},
};
</script>

<style lang="less" scoped>
.ant-advanced-search-form {
  padding: 24px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  width: 100% !important;
}
::v-deep .ant-col .ant-form-item-control-wrapper {
  width: 100%;
}
// ::v-deep .ant-form-item-label label {
//     color: rgba(0, 0, 0, 0.85);
//     margin-right: 10px !important;
// }

.resize {
  resize: "none";
}
.form-item-bottom-num{
  .ant-form-item{
    margin-bottom: 0px !important;
  }
}
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
</style>
